<template>
	<div class="tenant">
		<div class="search w-50 mb-3">
			<el-input placeholder="输入身份证号码快速检索" size="small">
				<el-button slot="append" type="primary" icon="el-icon-search"></el-button>
			</el-input>
		</div>
		<el-form :model="form" label-width="120px" size="small">
			<el-form-item label="租客姓名">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="手机号码">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="身份证号码">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="身份证照片">
				<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/">
					<i class="el-icon-plus avatar-uploader-icon"></i>
                    <span>点击添加身份证正面图</span>
				</el-upload>
				<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/">
					<i class="el-icon-plus avatar-uploader-icon"></i>
                    <span>点击添加身份证反面图</span>
				</el-upload>
			</el-form-item>
			<el-form-item label="租金">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="押金">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="租赁日期">
				<el-col :span="11">
					<el-date-picker type="date" placeholder="开始日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
				</el-col>
				<el-col class="line" :span="2">
                    <div class="text-center">~</div>
                </el-col>
				<el-col :span="11">
					<el-date-picker placeholder="结束日期" v-model="form.date2" style="width: 100%;"></el-date-picker>
				</el-col>
			</el-form-item>
			<el-form-item label="交租(截止到几号)">
				<el-date-picker type="date" placeholder="选择日期"></el-date-picker>
			</el-form-item>
			<el-form-item label="水表(底表读数)">
				<el-input>
					<el-button slot="append" type="primary">获取读数</el-button>
				</el-input>
			</el-form-item>
			<el-form-item label="电表(底表读数)">
				<el-input>
					<el-button slot="append" type="primary">获取读数</el-button>
				</el-input>
			</el-form-item>
			<el-form-item label="燃气表(底表读数)">
				<el-input>
					<el-button slot="append" type="primary">获取读数</el-button>
				</el-input>
			</el-form-item>
			<el-form-item label="网费">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="管理费">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="燃气用费">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="水费">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="性别">
				<el-radio-group v-model="form.resource">
					<el-radio label="男"></el-radio>
					<el-radio label="女"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="同步新增">
				<el-select v-model="form.resource">
					<el-option label="新增租户" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<!-- 
			<el-form-item label="即时配送">
				<el-switch v-model="form.delivery"></el-switch>
			</el-form-item>
			<el-form-item label="活动性质">
				<el-checkbox-group v-model="form.type">
					<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
					<el-checkbox label="地推活动" name="type"></el-checkbox>
					<el-checkbox label="线下主题活动" name="type"></el-checkbox>
					<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="特殊资源">
				<el-radio-group v-model="form.resource">
					<el-radio label="线上品牌商赞助"></el-radio>
					<el-radio label="线下场地免费"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="活动形式">
				<el-input type="textarea" v-model="form.desc"></el-input>
			</el-form-item> -->
			<!-- <el-form-item>
				<el-button type="primary">立即创建</el-button>
				<el-button>取消</el-button>
			</el-form-item> -->
		</el-form>
	</div>

</template>

<script>
	export default {
		name: 'Tenant',
		data() {
			return {
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				}
			}
		}
	}

</script>

<style lang="scss" scoped>
	.search {
		margin-left: auto;
	}


	.avatar-uploader {
		box-sizing: border-box;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 290px;
		font-size: 0;
		display: inline-block;
		text-align: center;
        margin-right: 20px;
        &:last-child{margin-right: 0;}

		&:hover {
			border-color: #409EFF;
		}
        span{
            position: absolute;
            font-size: 16px;
            width: 100%;
            left: 0;
            top: 50%;
        }
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 120px;
			text-align: center;
		}
	}

</style>
